<!-- 消费历史 -->
<template>
  <view class="page_content">
    <navBar title="消费历史"></navBar>
    <nut-swipe-group lock>
      <BillListItem :billData="item" v-for="(item, index) in billListData" :key="index" @getData="getBillList"/>
    </nut-swipe-group>

    <tabBar></tabBar>
  </view>
</template>
<script setup>
  import { ref, watchEffect } from 'vue'
  import constData from '@/api/const.js' // 常量数据
  import API from '../../api/modules/bill'
  import commonLogin from '@/common/common'
  import { useOutsideUserInfoStore } from '@/store/userInfo'
  import BillListItem from './components/bill-item.vue'
  const useInfoStore = useOutsideUserInfoStore()
  defineOptions({
    name: 'BillListPage'
  })

  // 获取openId
  const openId = computed(() => {
    return useInfoStore.openId
  })
  // 查询条件
  const searchData = ref({
    shopId: '',
    itemName: '',
    time: ''
  })
  const billListData = ref([]) // 列表数据
  const loadingStatus = ref(null) // 页面加载状态
  // 获取账单列表
  const getBillList = () => {
    let params = {
      pageIndex: 1,
      pageSize: 1000,
      itemName: searchData.itemName || '',
      token: useInfoStore.userToken || '',
      shopId: searchData.shopId || '',
      time: searchData.time || '',
      wxType: constData.wxType
    }
    API.API_GET_BILLLIST_GET(params).then((res) => {
      let resData = res.data || {}
      billListData.value = resData.billDetails || []
      console.log('billListData.value:::', billListData.value)
    })
  }
  // 小程序onShow周期，每次加载页面都执行
  onShow(() => {
    console.log('useInfoStore.userToken', useInfoStore.userToken)
    if (openId.value && useInfoStore.userToken) {
      loadingStatus.value = true
      getBillList()
      loadingStatus.value = false
    }
  })
  // 监听openId，首次加载执行
  watch(
    () => openId.value,
    (val) => {
      loadingStatus.value = true
      commonLogin.userLogin(getBillList)
      loadingStatus.value = false
    }
  )
</script>
<style lang="scss" scoped>
  .page_content {
    display: flex;
    flex-direction: column;
    // align-items: center;
    // justify-content: center;
    min-height: calc(100%);
  }
</style>
